<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是新窗口</title>
</head>
<body>
    <h5>我是新窗口</h5>

    <button type="button" class="move-by" >moveBy</button>
    
    <button type="button" class="move-to" >moveTo</button>
    
    <button type="button" class="resize-by" >resizeBy</button>
    
    <button type="button" class="resize-to" >resizeTo</button>

    <button type="button" class="close" >close</button>

    <script type="text/javascript">
        let mb = document.querySelector( '.move-by' );
        let listener1 = ()=>{
            window.moveBy( 5 , 5 ); // moveBy( x , y )
        }
        mb.addEventListener( 'click' , listener1 , false );

        let mt = document.querySelector( '.move-to' );
        let listener2 = ()=>{
            window.moveTo( 500 , 200 ); // moveTo( x , y )
        }
        mt.addEventListener( 'click' , listener2 , false );

        let rb = document.querySelector( '.resize-by' );
        let listener3 = ()=>{
            window.resizeBy( 10 , 10 ); // resizeBy( x , y )
        }
        rb.addEventListener( 'click' , listener3 , false );

        let rt = document.querySelector( '.resize-to' );
        let listener4 = ()=>{
            window.resizeTo( 300 , 150 ); // resizeTo( x , y )
        }
        rt.addEventListener( 'click' , listener4 , false );

        let ct = document.querySelector( '.close' );
        let listener5 = ()=>{
            window.close(); 
        }
        ct.addEventListener( 'click' , listener5 , false );
    </script>
    
</body>
</html>